<template>
  <!-- 底部导航 -->
  <view class="page-footer">
    <view class="foot-item" :class="item.pagePath == activeRouter?'active':''" v-for="(item,index) in footerList"
          :key="index" @click="goRouter(item)"
          v-if="!(item.role!='0'&&!selectMerchantRole.split(',').includes(item.role))">
      <block v-if="item.pagePath == activeRouter">
        <image :src="item.selectedIconPath"></image>
        <view class="txt">{{ item.text }}</view>
      </block>
      <block v-else>
        <image :src="item.iconPath"></image>
        <view class="txt">{{ item.text }}</view>
      </block>
    </view>
  </view>
</template>

<script>
import {
  mapGetters
} from "vuex";

export default {
  name: 'footerPage',
  props: {},
  computed: {
    ...mapGetters(['selectMerchantRole']),
  },
  created() {
    let routes = getCurrentPages(); //获取当前打开过的页面路由数组
    let curRoute = routes[routes.length - 1].route //获取当前页面路由
    this.activeRouter = '/' + curRoute
  },
  mounted() {
  },
  data() {
    return {
      activeRouter: '',
      footerList: [{
        pagePath: "/pages/admin/work/index",
        iconPath: require("../../static/gzth.png"),
        selectedIconPath: require("../../static/gztl.png"),
        text: "工作台",
        role: '0'
      },
        {
          pagePath: "/pages/admin/order/index",
          iconPath: require("../../static/ddh.png"),
          selectedIconPath: require("../../static/ddl.png"),
          text: "订单",
          role: '1'
        },
        {
          pagePath: "/pages/admin/after_sale/index",
          iconPath: require("../../static/shh.png"),
          selectedIconPath: require("../../static/shl.png"),
          text: "售后",
          role: '3'
        },
        {
          pagePath: "/pages/admin/goods/index",
          iconPath: require("../../static/sph.png"),
          selectedIconPath: require("../../static/spl.png"),
          text: "商品",
          role: '2'
        }
      ]
    }
  },
  methods: {
    goRouter(item) {
      var pages = getCurrentPages();
      var page = (pages[pages.length - 1]).$page.fullPath;
      if (item.pagePath == page) return

      uni.redirectTo({
        url: item.pagePath,
        animationType: 'none' // 关闭默认的滑动效果
      });
    }
  }
}
</script>

<style scoped lang="scss">
.page-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: calc(100rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  box-sizing: border-box;
  border-top: solid 1rpx #F3F3F3;
  background-color: #fff;
  // box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
  padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
  padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/

  .foot-item {
    display: flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    padding: 0 20rpx;

    &.active {
      color: #2A7EFB
    }
  }

  .foot-item image {
    height: 40rpx;
    width: 40rpx;
    text-align: center;
    margin: 0 auto;
  }

  .foot-item .txt {
    font-size: 20rpx;
    margin-top: 6rpx;
  }
}
</style>